{% extends "base/front.html" %}

{% block title %}编辑文章{% endblock %}

{% block head %}
  <!--引入wangEditor.css-->
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='wangEditor/css/wangEditor.min.css') }}">
{% endblock %}

{% block PathNavigation %}
            <ul class="breadcrumb">
                <li>
                     <a href="{{ url_for('front.index') }}">首页</a>
                </li>
                <li class="active">
                    编辑
                </li>
            </ul>
{% endblock %}

{% block container %}
        <div>
            <form class="form-horizontal" role="form" id="UpdateBlogFormId">
                <center><h3>
                    <scan class="help-block"><i class="icon-pencil icon-1x"></i>&nbsp;编辑文章
                    <input type="button" onclick=putForm() value="提交更新" class="btn btn-success btn-xs" />
                    </scan>
                </h3></center>
                <div class="form-group">
                    <label for="blogTitle" class="col-sm-2 control-label"><i class="icon-ok-sign"></i>&nbsp;文章标题</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="blogTitle" name="title" placeholder="请在此处填写文章标题" value="{{ data.title }}" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="blogTag" class="col-sm-2 control-label"><i class="icon-tags"></i>&nbsp;文章标签</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="blogTag" name="tag" placeholder="请在此处输入标签并以空格分割" value="{{ data.tag }}"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="blogCatalog" class="col-sm-2 control-label"><i class="icon-folder-open"></i>&nbsp;文章分类</label>
                    <div class="col-sm-10">
                        <select class="form-control" id="blogCatalog" name="catalog">
                            <option>{{ data.catalog }}</option>
                            {% for catalog in g.api.blog_get_catalog_list().data %}
                                {% if data.catalog != catalog %}
                                    <option>{{ catalog }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="blogSource" class="col-sm-2 control-label"><i class="icon-info-sign"></i>&nbsp;文章来源</label>
                    <div class="col-sm-10">
                    {% if data.get('sources') == '原创' %}
                        <label class="radio-inline">
                            <input type="radio" name="sources" value="原创" checked="checked">原创
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sources" value="转载">转载 
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sources" value="翻译">翻译
                        </label>
                    {% elif data.get('sources') == '转载' %}
                        <label class="radio-inline">
                            <input type="radio" name="sources" value="原创">原创
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sources" value="转载" checked="checked">转载 
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sources" value="翻译">翻译
                        </label>
                    {% elif data.get('sources') == '翻译' %}
                        <label class="radio-inline">
                            <input type="radio" name="sources" value="原创">原创
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sources" value="转载">转载 
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sources" value="翻译" checked="checked">翻译
                        </label>
                    {% endif %}
                    </div>
                </div>
                <div class="form-group">
                    <textarea class="form-control" id="editor" style="height:500px; max-height:640; width: 100%" name="content"><p>{{ data.content }}</p></textarea>
                </div>
                <div class="form-group">
                    <input type="hidden" class="form-control" name="author" value="{{ data.author }}">
                </div>
                <div class="form-group">
                    <input type="hidden" class="form-control" name="blogId" value="{{ blogId }}">
                </div>
            </form>
        </div>
{% endblock %}

{% block script %}

<!--引入jquery和wangEditor.js-->
<script type="text/javascript" src="{{ url_for('static', filename='wangEditor/js/wangEditor.min.js') }}"></script>
<script type="text/javascript">
    // 获取元素
    var div = document.getElementById('editor');
    // 生成编辑器
    var editor = new wangEditor(div);
    // 为当前的editor配置密钥
    editor.config.mapAk = 'rsG1HfOkrldOGdI53TMI9rAdxGuzb0PI';
    // 取消粘贴过滤
    editor.config.pasteFilter = true;
    // 插入代码时的默认语言
    editor.config.codeDefaultLang = 'python';
    /*
        上传图片功能，文档地址：http://www.kancloud.cn/wangfupeng/wangeditor2/113990；
        后台文档地址：http://www.kancloud.cn/wangfupeng/wangeditor2/115736;
        后台需要配置一个获取表单上传图片并保存的路由。
    */
    editor.config.uploadImgUrl = "{{ url_for('upload.UploadBlogImage', editorType='wangEditor') }}";
    editor.config.uploadImgFileName = 'WriteBlogImage';
    // 创建编辑器
    editor.create();
</script>


<script type="text/javascript">
    // 更新文章数据
    function putForm() {
        $.ajax({
            url: '{{ url_for("api.blog") }}',
            method: 'PUT',
            datatype: 'json',
            data: $('#UpdateBlogFormId').serialize(),
            success: function(res) {
                console.log(res);
                if (res.success == true){
                    layer.msg("更新文章成功！", {icon: 1, time: 3*1000});
                    window.location="/blog/{{ blogId }}.html";
                } else {
                    layer.msg("提交文章失败，请重试提交或报告错误！\n错误原因是：" + res.msg, {icon: 2, time: 15*1000});
                    //location.reload(true);
                }
            },
        });
    };
</script>
{% endblock %}
